﻿<template>
  <el-upload class="elm-upload" action="/api/system/login/io/Upload" v-bind="$attrs" v-on="$listeners"
             :headers="{Authorization:authorization}"
             :data="{module_name:module_name, rel_id:rel_id}"
             :file-list="fileList" :on-preview="preview"
             :on-exceed="handleExceed" :on-success="success"
             :before-remove="beforeRemove" :on-remove="remove"
             :limit="limit" :multiple="multiple">
    
    <el-button v-if="!is_mob" size="mini" type="primary">上传</el-button>
    <van-image v-if="is_mob" height="24"
               src="/images/mob-icon-vf-03.svg"/>
    <div slot="tip" class="el-upload__tip">{{ tip }}</div>
  
  </el-upload>

</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fileNum: 0,
      authorization: 'Bearer ' + elm.info.token
    }
  },
  mounted() {
    this.getFileList();
  },
  model: {},
  props: {
    rel_id: {
      type: String
    },
    module_name: {
      type: String,
      default: function () {
        return "";
      }
    },
    tip: {
      type: String,
      default: function () {
        return "只能上传图片";
      }
    },
    is_mob: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 10,
    }
  },
  watch: {
    module_name: {
      handler(value) {
        this.getFileList();
      }
    },
    rel_id: {
      handler(value) {
        this.getFileList();
      }
    }
  },
  methods: {
    async getFileList() {
      this.fileList = [];
      var res = await elm.post("/system/login/io/GetData", {module_name: this.module_name, rel_id: this.rel_id});
      for (var item of res) {
        this.fileList.push({
          url: "/api/system/login/io/Viewer/" + item.id + "?token=" + elm.info.token,
          name: item.origin_name,
          id: item.id
        });
      }
      this.fileNum = this.fileList.length;
    },
    async success(res, file, fileList) {
      this.fileNum = fileList.length;
      console.log(fileList);
    },
    preview(file) {
      if (file.status != "ready") {
        var element = document.createElement("a");
        element.href = file.url;
        element.target = "_blank"
        element.click();
      } else {
        this.$message.error('该文件暂未上传。');
      }
    },
    async remove(file, fileList) {
      this.fileNum = fileList.length;
      if (file.id == undefined) {
        file.id = file.response.id;
      }
      var res = await elm.post("/system/login/io/Delete", {id: file.id});
      if (res > 0) {
        for (var i in this.fileList) {
          if (this.fileList[i].id == file.id) {
            this.fileList.splice(i, 1);
            break;
          }
        }
      } else {
        this.$message.error('删除失败，请稍后尝试。');
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm('确定移除' + file.name + '?');
    },
    handleExceed(files, fileList) {
      this.$message.warning({
        showClose: true,
        message: `当前限制选择【` + this.limit + `】个文件`,
        type: 'warning'
      });
    }
  }
}
</script>

<style scoped>
</style>